<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
		<title>搜索</title>
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" href="css/store.css" />
	</head>
	<body>
		<div class="layout">
			<!--header-->
			<div class="wrapper">
				<div class="header">
					<a class="s_preson" href="#" target="_blank"> < 首页</a>
					<div class="store">
						<span>搜索商品</span>
					</div>
				</div>
			</div>
			
			<div class="s_search_box">
				<input class="s_searchBox" />
				<i class="s_searchBtn">搜索</i>
			</div>
			<div class="s_goods storeMain">
				<div class="storeBox">
					<div class="list-item">
						<div class="list-img"><a href="#"><img src="img/default.jpg" alt="" /></a><i>√赠</i><div class="arrow-up"></div></div>
						<div class="list-content">
							<a href="#"><h3 class="list-title">1五谷康石磨全麦面粉 450g/袋</h3></a>
							<p class="list-price"><em>$65</em>&nbsp;</p>
							<div class="list-main">微信支付<span>立减<i>3</i>元</span></div>
							<div class="list-add"><em class="prev">-</em><input type="text" size="5" value="1"><em class="next">+</em></div>
						</div>
					</div>
					<div class="list-item">
						<div class="list-img"><a href="#"><img src="img/default.jpg" alt="" /></a><i>√赠</i><div class="arrow-up"></div></div>
						<div class="list-content">
							<a href="#"><h3 class="list-title">1五谷康石磨全麦面粉 450g/袋</h3></a>
							<p class="list-price"><em>$65</em>&nbsp;</p>
							<div class="list-main">微信支付<span>立减<i>3</i>元</span></div>
							<div class="list-add"><em class="prev">-</em><input type="text" size="5" value="1"><em class="next">+</em></div>
						</div>
					</div>
					<div class="list-item">
						<div class="list-img"><a href="#"><img src="img/default.jpg" alt="" /></a><i>√赠</i><div class="arrow-up"></div></div>
						<div class="list-content">
							<a href="#"><h3 class="list-title">1五谷康石磨全麦面粉 450g/袋</h3></a>
							<p class="list-price"><em>$65</em>&nbsp;</p>
							<div class="list-main">微信支付<span>立减<i>3</i>元</span></div>
							<div class="list-add"><em class="prev">-</em><input type="text" size="5" value="1"><em class="next">+</em></div>
						</div>
					</div>
					<div class="list-item">
						<div class="list-img"><a href="#"><img src="img/default.jpg" alt="" /></a><i>√赠</i><div class="arrow-up"></div></div>
						<div class="list-content">
							<a href="#"><h3 class="list-title">1五谷康石磨全麦面粉 450g/袋</h3></a>
							<p class="list-price"><em>$65</em>&nbsp;</p>
							<div class="list-main">微信支付<span>立减<i>3</i>元</span></div>
							<div class="list-add"><em class="prev">-</em><input type="text" size="5" value="1"><em class="next">+</em></div>
						</div>
					</div>
					<div class="list-item">
						<div class="list-img"><a href="#"><img src="img/default.jpg" alt="" /></a><i>√赠</i><div class="arrow-up"></div></div>
						<div class="list-content">
							<a href="#"><h3 class="list-title">1五谷康石磨全麦面粉 450g/袋</h3></a>
							<p class="list-price"><em>$65</em>&nbsp;</p>
							<div class="list-main">微信支付<span>立减<i>3</i>元</span></div>
							<div class="list-add"><em class="prev">-</em><input type="text" size="5" value="1"><em class="next">+</em></div>
						</div>
					</div>
					<p class="s_goods_nothing">没有结果</p>
				</div>
			</div>
			
			
			<div class="addUp">
				<div class="s_shopping"><i class="s_icon s_up"></i><em>3</em></div>
				<div class="total">总计:<p>$<em>50</em></p></div>
				<div class="settlement">去结算</div>
			</div>
		</div>
	</body>
</html>
<script type="text/javascript" src="js/zepto.min.js" ></script>
<script type="text/javascript">
$(function(){
	(function(){
		var searchBtn  = $('.s_search_box');
		var searchTxt =  searchBtn.find('.s_searchBox');
		
		searchTxt.val('请输入商品名称');
		var val = searchTxt.val();
		
		searchTxt.focus(function(){
			var curVal = $(this).val();
			if(val==curVal){
				$(this).val('')
			}else if(curVal==''){
				$(this).val(val);
			}
			
		});
		searchTxt.blur(function(){
			var curVal = $(this).val();
			if(curVal==''){
				$(this).val(val);
			}
		});
		
		//商品加减统计
		var listItem = $('.list-content');
		var listAdd  = listItem.find('.list-add');
		for(var i=0;i<listItem.length;i++){
			fnMain(listItem.eq(i));
		};
				
		function fnMain(quantityCur){
			var oPrev = quantityCur.find('.prev');
			var oNext  =   quantityCur.find('.next');
			var formInput =   quantityCur.find('input');
			
			var num=0;
			
			function showHide(){
				if(num==0){
					oPrev.css({'display':'none'});
					formInput.css({'display':'none'});
				}else{
					oPrev.css({'display':'inline-block'});
					formInput.css({'display':'inline-block'});
				}
			}
			
			oPrev.click(function(){
				if(num>0){
					num--;
				};
				showHide();
				formInput.val(num);
			});
			oNext.click(function(){
				num++;
				showHide();
				formInput.val(num);
			});
		};
	})();
})
</script>